<template>
  <BasicDrawer width="600px" title="订单详情" @register="register">
    <a-descriptions bordered :labelStyle="{ width: '150px' }" :column="1" size="small">
      <a-descriptions-item label="商户订单号">{{ info?.outTradeNo }}</a-descriptions-item>
      <a-descriptions-item label="系统订单号">{{ info?.orderNo }}</a-descriptions-item>
      <a-descriptions-item label="付款人姓名">{{ info?.input }}</a-descriptions-item>
      <a-descriptions-item label="订单金额/实付"
        >{{ info?.amount }}/{{ info?.money }}</a-descriptions-item
      >
      <a-descriptions-item label="支付通道">{{ info?.codeTitle }}</a-descriptions-item>
      <a-descriptions-item label="收款信息">
        <div
          v-html="
            info?.collectionInput
              ? formatInput(info?.collectionInput)
              : formatInput(info?.paymentInfo)
          "
        ></div>
      </a-descriptions-item>
      <a-descriptions-item label="佣金/费率"
        >{{ info?.agentGain }}/{{ info?.agentRate }}</a-descriptions-item
      >
      <a-descriptions-item label="支付状态">
        <a-tag :color="info.payStatus == 0 ? 'blue' : info.payStatus == 1 ? 'blue' : ''">{{
          formatPayStatus(info?.payStatus)
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="订单状态">
        <a-tag :style="getOrderColor(info?.orderStatus)">{{
          getOrderStatus(info?.orderStatus)
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="验证码">{{ info?.userCode }}</a-descriptions-item>
      <a-descriptions-item label="支付设备信息">{{ info?.payDeviceInfo }}</a-descriptions-item>
      <a-descriptions-item label="订单创建时间">{{
        dayjs(info?.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
      }}</a-descriptions-item>
      <a-descriptions-item label="提交时间">{{
        info?.customerTime == ''
          ? ''
          : dayjs(info?.customerTime * 1000).format('YYYY-MM-DD HH:mm:ss')
      }}</a-descriptions-item>
      <a-descriptions-item label="收款二维码">
        <a-qrcode :value="info?.agentImgSrc"
      /></a-descriptions-item>
      <a-descriptions-item label="客人提交信息">{{
        info?.displayData ? info?.displayData.join(',') : ''
      }}</a-descriptions-item>
    </a-descriptions>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { getOrderStatus, getOrderColor } from '@/utils/order';
  import dayjs from 'dayjs';

  const info = ref({
    collectionInput: [],
    paymentInfo: [],
  });
  const [register] = useDrawerInner((data) => {
    info.value = data;
    console.log(data);
  });
  const formatPayStatus = (status) => {
    const statusText = ['未支付', '已支付', '无信息'];
    return statusText[status];
  };
  function formatInput(info) {
    console.log(info);
    let text = '';
    if (!Array.isArray(info) || info.length <= 0) return '';
    info.forEach((element) => {
      text += element.title + ':' + element.value + '<br/>';
    });
    return text;
  }
</script>
